/*
 * @Author: liu wang wang
 * @Date: 2020-07-07 19:28:06
 * @LastEditTime: 2020-07-16 22:15:39
 * @LastEditors: liu wang wang
 * @Description: 弹窗框架类
 * @FilePath: \st-sdk-js\src\utils\Bone.ts
 */
import Common from './Common'
import { BoneInterface } from '../../types';
import store from './store';

class Bone extends Common {
    protected width: string
    protected height: string
    constructor(args: BoneInterface) {
        super();
        this.width = args.width || 'auto';
        this.height = args.height || 'auto';
    }
    private closeBtn(): HTMLElement {
        const span = this.createSpan();
        span.innerHTML = '×';
        const style = `
            display:block;
            padding:13px;
            color:#808080;
            font-size:20px;
            position:absolute;
            width:15px;
            line-height:15px;
            cursor:pointer;
            top:0;
            right:0;
            `;
        this.setStyle(span, style);
        span.addEventListener('click', () => {
            this.close();
            store.getStore('close') && store.getStore('close')();
        })
        return span
    }
    protected getTitle(title: string): HTMLElement {
        const titltBox = this.createP();
        const titltBoxStyle = `
        width:100%;
        height:42px;
        line-height:42px;
        font-size:14px;
        color:#000;
        position:absolute;
        top:0;
        left:0;
        background:#F5F6FA;
        border-bottom:1px solid #E1E6EB;
        padding-left:36px;
        box-sizing:border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        `;
        titltBox.innerText = title;
        this.setStyle(titltBox, titltBoxStyle);
        return titltBox;
    }
    public init(content: any, title?: string, ): HTMLElement {
        const bone: HTMLElement = this.createDiv();
        const closeBtn: HTMLElement = this.closeBtn();
        const style = `
            width:${this.width};
            height:${this.height};
            padding:36px 36px 20px;
            background-color:#fff;
            border-radius:4px;
            position:relative;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            `;
        this.setStyle(bone, style);
        if (title) {
            const titleHTML: HTMLElement = this.getTitle(title);
            bone.appendChild(titleHTML);
            this.setStyle(bone, 'padding-top:55px;');
        }
        bone.appendChild(closeBtn);
        bone.appendChild(content);
        return bone;
    }

}

export default Bone;